import { useState } from 'react';
import { Input } from 'antd';
import Navigation from '../../components/Navigation/index.tsx';
import Rightnav from '../../components/rightnav/rightnav.tsx';
import StickyHeader from '../../components/StickyHeader/StickyHeader';
import PaginationComponent from '../../components/Pagination';
import { cstypedata, csdata } from './colorsearch.ts';
import './colorsearch.css';

const ColorSearch = () => {
    const pageSize = 40;
    const [currentPage, setCurrentPage] = useState(1);

    const handlePageChange = (pageNumber: number) => {
        setCurrentPage(pageNumber);
    };

    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    let paginatedData = csdata.slice(startIndex, endIndex);

    const [highlightedIndex, setHighlightedIndex] = useState(0);

    const handleMouseEnter = (index: any) => {
        if (highlightedIndex === null) {
            setHighlightedIndex(index);
        }
    };

    const handleClick = (index: any) => {
        setHighlightedIndex(index);
    };

    return (
        <div className='colorsearch_box'>
            <div className='Navigation'>
                <Navigation />
            </div>
            <Rightnav />
            <div className='colorsearch_top'>
                <div className='colorsearch_top_box'>
                    <div className='colorsearch_top_select_box'>
                        <StickyHeader />
                    </div>
                    <div className='colorsearch_top_input_box'>
                        当前位置
                        <Input className='colorsearch_top_input' placeholder="在当前条件下搜索" />
                    </div>
                    <div className='colorsearch_top_type_box'>
                        <div className='colorsearch_top_type_box_left'>所有:</div>
                        <div className='colorsearch_top_type_box_right'>
                            {cstypedata.map((item, index) => (
                                <div
                                    key={index}
                                    onMouseEnter={() => handleMouseEnter(index)}
                                    onClick={() => handleClick(index)}
                                    style={{
                                        backgroundColor: highlightedIndex === index ? 'orange' : 'transparent',
                                        color: highlightedIndex === index ? 'white' : 'black',
                                        borderRadius: '10px',
                                        transition: 'background-color 0.3s, color 0.3s',
                                        cursor: 'pointer'
                                    }}
                                >
                                    <a>{item}</a>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
            <div className='colorsearch_main'>
                <div className='colorsearch_main_box'>
                    {paginatedData.map((item: any, index: number) => (
                        <div className='PosterBody_list_item' key={index} style={{ position: 'relative' }}>
                            <img src={item.image} alt="" className='PosterBody_list_item_img' />
                            <div className="p_overlay">
                                <div className="p_overlay_title">
                                    {item.name}<span>☆</span>
                                    <span style={{ display: 'none' }}>
                                        {item.hex}
                                    </span>
                                </div>
                                <div className="p_overlay_button">
                                    <button className='p_overlay_button_download'>点击下载</button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <div className='cspage'>
                <PaginationComponent
                    currentPage={currentPage}
                    total={csdata.length}
                    pageSize={pageSize}
                    onPageChange={handlePageChange}
                    showSizeChanger={false}
                />
            </div>
        </div>
    );
}

export default ColorSearch;